<template>
  <div class="nav-header" :style="{color:navMainColor,background:navBgColor}"  >
    <img class="nav-back" :src="getNavBackIcon" alt v-if="isNavBack" @click="tap2back" /> 
    <img
      class="nav-back"
      src="@/assets/images/sign_close.png"
      alt
      v-else-if="isNavClose"
      @click="tap2close"
    />
    <div class="nav-back2" @click="tap2change" v-else>
      <img class :src="getNavBackIcon" alt />
      <span>切换身份</span>
    </div>
    <p class="title">{{headerTitle}}</p>
    <p class="next-btn" v-if="isNext" @click="tap2nextEvent">{{headerNext}}</p>
    <div class="next-msg" v-if="isNedMsg" @click="tap2msg">
      <img src="@/assets/images/nav_news.png" alt />
      <span v-if="msgNum && msgNum > 0">{{ msgNum }}</span>
    </div>
    <div class="next-course" v-if="isNextCourse" @click="tap2course">查看教程</div>
  </div>
</template>

<script>
import navBackIcon_black from "@/assets/images/nav_back_black.png";
import navBackIcon_yellow from "@/assets/images/nav_back_yellow.png";
import navBackIcon_white from "@/assets/images/nav_back_white.png";
import navBackIcon_change from "@/assets/images/nav_back_switch.png";
import Vue from "vue"
import mixin from "@/utils/mixin";
import { Dialog, Toast } from 'vant'
Vue.use(Toast);
export default {
  name: "navHeader",
  mixins: [mixin],
  props: {
    headerTitle: String,
    headerNext: String,
    isNavBack: {
      type: Boolean,
      default: true
    },
    isNavClose: {
      type: Boolean,
      default: false
    },
    isNext: {
      type: Boolean,
      default: true
    },
    isNedMsg: {
      type: Boolean,
      default: false
    },
    msgNum: {
      type: Number,
      default: 0
    },
    navMainColor: {
      type: String,
      default: "#303133"
    },
    navBgColor: {
      type: String,
      default: "rgba(0, 0, 0, 0)"
    },
    isNextCourse: {
      type: Boolean,
      default: false
    },
    courseType: Number
  },
  computed: {
    getNavBackIcon: function () {
      if (!this.isNavBack) {
        return navBackIcon_change;
      } else if (this.navMainColor == "#303133") {
        return navBackIcon_black;
      } else if (this.navMainColor == "#E9C283") {
        return navBackIcon_yellow;
      } else {
        return navBackIcon_white;
      }
    }
  },
  data () {
    return {};
  },
  mounted () {
    window.gainContentFromIos = this.$bridge.gainContentFromIos;
  },
  methods: {
    tap2nextEvent ($event) {
      this.$emit("tap2next", $event);
    },
    tap2back () {
      if (this.$route.query.goindex === 'true' ) {
        this.$bridge.callHandler('returnNative', {}, (res) => {
          console.log(res)
        })
      }else if(this.$route.name == "improveInfo"){
        this.$router.replace({
          path:"/infIndex/index",
          query:{
            uniqueId:window.localStorage.uniqueIdByInfluencer
          }
        });
      }else if(window.history.length <= 1){ 
        this.$bridge.callHandler('returnNative', {}, (res) => {
          console.log(res)
        })
      } else {
        window.history.back(-1);
        return false;
      } 
    },
    tap2close () {
      console.log("关闭页面");
      this.$router.replace("/infIndex/index");
    },
    tap2change () {
      Dialog.confirm({
        message: '切换成广告主身份？',
        confirmButtonText: '切换',
      }).then(() => {
        console.log();
        let win_storage = window.localStorage;
        let parmas = {
          platformRole: 2,
          uniqueId: this.isNull(win_storage.uniqueIdByInfluencer) ? "0" : win_storage.uniqueIdByInfluencer
        }
        this.$bridge.callHandler('switchRoler', parmas, (res) => {
          console.log(res)
        });
      })
    },
    tap2msg () {
      let sto_uid = window.localStorage.getItem("uniqueIdByInfluencer");
      if (!this.isNull(sto_uid)) {
        this.$http.post("user/getUserInfo", { uniqueId: sto_uid}).then(res => {
          if (res.data.completeStatus) {
            this.goUrl("/infMine/msgCenter");
            return true;
          }
          this.goUrl("improveInfo", {});
          return false;
        });
      } else {
        Toast({
          type: "fail",
          message: "你暂未登录！",
          onClose: () => {
            window.sessionStorage.setItem("appKey" , null) ;
            window.sessionStorage.setItem("jmsz" , null) ;  
            window.sessionStorage.removeItem("appKey");
            window.sessionStorage.removeItem("appKejmszy");
            this.goUrl("infLogin", {});
          }
        })

      }
    },
    tap2course () {
      switch (this.courseType) {
        //朋友圈图文广告转发教程
        case 1:
          this.goUrl('/infIndex/friendPicture')
          break
        //朋友圈文章广告转发教程
        case 2:
          this.goUrl('/infIndex/friendArticle')
          break
        //微信群文章广告转发教程
        case 3:
          this.goUrl('/infIndex/wxArticle')
          break
        //微信群图文广告转发教程
        case 4:
          this.goUrl('/infIndex/wxArticle')
          break
      }
    }
  }
};
</script>
 
<style scoped lang="scss">
.nav-header {
  width: 100%;
  height: 88px;
  font-size: 36px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(48, 49, 51, 1);
  line-height: 88px;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transform: translateZ(0);
  .nav-back {
    width: 44px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    margin: auto;
    z-index: 9999;
  }
  .nav-back2 {
    width: auto;
    height: 88px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    margin: auto;
    line-height: 88px;
    z-index: 9999;
    img {
      width: 44px;
    }
    span {
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      margin-left: 16px;
    }
  }
  .title {
    width: 460px;
    height: 100%;
    margin: auto;
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .next-btn {
    height: 100%;
    font-size: 30px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    position: absolute;
    top: 0;
    right: 31px;
  }
  .next-msg {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 31px;
    img {
      width: 50px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    span {
      font-size: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 28px;
      padding: 2px 8px;
      border-radius: 12px;
      background: rgba(255, 37, 37, 1);
      position: absolute;
      top: 11px;
      left: 20px;
    }
  }
  .next-course {
    // width: 120px;
    height: 88px;
    font-size: 30px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 88px;
    position: absolute;
    top: 0;
    right: 31px;
  }
}
</style>
